<template>
  <tbc-dialog title="品牌列表" ref="dialog" basic>
    <tbc-pagination :total="total" :config="{page, size}" simple @change="loadDataList">
      <template v-slot:left>
        <el-input placeholder="关键字" class="short" v-model="keyword" clearable
                  style="margin-right:10px;width:260px;" size="small">
          <template v-slot:append>
            <el-button size="small"
                       icon="el-icon-search" type="primary"
                       @click="loadDataList(1)">查询
            </el-button>
          </template>
        </el-input>
        <el-button
            icon="el-icon-refresh-left" size="small"
            @click="onButtonClick({brand_id: '', brand_name: ''})">清除
        </el-button>
      </template>
      <template v-slot:right>
        <el-button size="small" icon="el-icon-refresh" circle @click="loadDataList(page)"></el-button>
      </template>
    </tbc-pagination>
    <div class="data-container">
      <tbc-dynamic-table
          v-loading="loading"
          :data="dataList"
          :cols="[
              {label: 'logo', prop: 'brand_logo', type: 'image', width: 100},
              {label: '名称/官网', prop: 'brand_name', minWidth: 320, maxWidth: 320},
              {label: '首字母', prop: 'first_letter', width: 120, align: 'center'},
              {label: '排序', prop: 'sort_val', width: 100, align: 'center'},
              {label: '操作', type: 'action', width: 80, fixed: 'right', click: onButtonClick,
                button: [
                  {label: '选择', type: 'text', code: 'choice'}
              ]}]">
        <template v-slot:brand_name="scope">
          <p>{{ scope.row.brand_id }}</p>
          <p>{{ scope.row.brand_name }}</p>
        </template>
      </tbc-dynamic-table>
    </div>
    <tbc-pagination :total="total" :config="{page, size}" @change="loadDataList"/>
  </tbc-dialog>
</template>
<script lang="ts">
import {defineComponent, ref, Ref} from 'vue'
import useGoodsBrand from './api/goodsBrand'

export default defineComponent({

  name: 'goods-band-selector',

  emits: ['choice'],

  setup(props, {emit}) {

    const dialog: Ref = ref(null)
    const brand = useGoodsBrand()

    const show = (): void => {
      dialog.value.show()
      if (!(brand.dataList as any).length) brand.loadDataList()
    }

    const close = (): void => {
      dialog.value.close()
    }

    const onButtonClick = (data: Record<string, string>): void => {
      emit('choice', data)
      dialog.value.close()
    }

    return {
      ...brand,
      dialog,
      show,
      close,
      onButtonClick
    }
  }
})
</script>
